<template>
	<main-content>
		<view class="content-color setting-pages">
			<view class="p-t-8">

			</view>
			<view class="flex p-x-16 p-y-12 flex-row justify-between items-center list-title"
				style="background-color: #fff;" @click="showPopupFn()">
				<view class="">
					密码设置
				</view>
				<view class="">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="p-16">
				<u-button type="primary" @click="getOut">退出登录</u-button>
			</view>
		</view>
		<u-popup v-model="showPopup" mode="center" width="90%" border-radius="14" :closeable='true'>
			<view>
				<view class="p-14">
					<group-title>
						<template #icon>
							<view class="main-color">
								<u-icon name="title-icon" custom-prefix="custom-icon" />
							</view>
						</template>
						密码设置
					</group-title>
				</view>
				<view class="p-x-16 p-b-16 p-t-2 setting-form">
					<u-form :model="formData" ref="formDataRef" :border-bottom='false' label-position='top'
						:label-style="labelStyle">
						<u-row gutter="16">
							<u-col span="12">
								<u-form-item label="原密码" prop="oldPassword">
									<u-input v-model="formData.oldPassword" type='password'
										placeholder="请输入密码：至少三种字符，最小 8 位" :password-icon='true' />
								</u-form-item>
							</u-col>
							<u-col span="12">
								<u-form-item label="新密码" prop="newPassword">
									<u-input v-model="formData.newPassword" type='password'
										placeholder="请输入密码：至少三种字符，最小 8 位" :password-icon='true' />
								</u-form-item>
							</u-col>
							<u-col span="12">
								<u-form-item label="确认密码" prop="confirmPwd">
									<u-input v-model="formData.confirmPwd" type='password' placeholder="请输入新密码"
										:password-icon='true' />
								</u-form-item>
							</u-col>
						</u-row>
					</u-form>
				</view>
				<view class="p-16">
					<u-button type="primary" @click="updadePsw">修改密码</u-button>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast1" />
	</main-content>
</template>
<script setup name='index'>
	import {
		reactive,
		ref,
		getCurrentInstance,
		computed,
		nextTick
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	import {
		useCommonStore
	} from '@/stores/common.js'
	import {
		useUserStore
	} from '@/stores/user.js'
	import {
		ZZB_AGENT_NO_STATUS,
		AUTH_BUSS_TYPE,
		ZZB_NO_TYPE_MCH
	} from '@/common/dict.js'
	import {
		debounce,
		selectDictLabel,
		parseTime,
		formatToMoney
	} from '@/common/common.js'
	import {
		userApi
	} from '@/common/api/user/index.js'
	import myArea from '@/components/my-area/index.vue'
	import {
		isMulPassword,
		validatePhoneNot
	} from '@/common/validate'
	const commonStore = useCommonStore()
	const {
		proxy
	} = getCurrentInstance()
	const uToast1 = ref(null)

	const maiColor = computed(() => {
		return proxy.$System.maiColor.value
	})
	const labelStyle = ref({
		fontSize: '28rpx',
		color: 'rgba(153, 153, 153, 1)'
	})
	const getOut = async () => {
		uni.showModal({
			title: '提示',
			content: '确定退出登录吗？',
			showCancel: true, // 是否显示取消按钮，默认为 true
			confirmColor: maiColor.value, // 确认按钮的文字颜色
			success: async (res) => {
				if (res.confirm) {
					console.log('用户点击确定'); // 点击确定之后执行的代码
					let res = await useUserStore().removeData()
					proxy.$System.goTo('/pages/index/index', {}, {
						method: 'reLaunch'
					})
				} else {
					console.log('用户点击取消'); // 点击取消之后执行的代码
				}
			}
		})

	}

	// 修改密码
	const initForm = {
		oldPassword: '',
		newPassword: '',
	}
	const formData = ref({
		...initForm
	})
	const formDataRef = ref(null)
	const rules = ref({
		oldPassword: [{
			required: true,
			message: '请输入原密码',
			trigger: ['change', 'blur']
		}],
		newPassword: [{
				required: true,
				message: '密码不能为空',
				trigger: ['change', 'blur']
			},
			{
				validator: isMulPassword,
			},
		],
		newPasswordAgain: [{
				required: true,
				message: '密码不能为空',
				trigger: ['change', 'blur']
			},
			{
				validator: isMulPassword,
			},
		],
	})

	const showPopup = ref(false)
	const tipContent = ref('')
	const showPopupFn = (val = '') => {
		formData.value = {
			...initForm
		}
		showPopup.value = true
		tipContent.value = val
		nextTick(() => {
			formDataRef.value?.setRules(rules.value);
		})
	}
	const updadePsw = () => {
		formDataRef.value.validate(async (valid) => {
			if (valid) {
				if (formData.value.newPassword != formData.value.confirmPwd) {
					uToast1.value.show({
						title: '新密码与确认密码不一致',
						type: 'error'
					})
					return
				}
				userApi.updatePwd(formData.value).then(res => {
					uni.showToast({
						title: `修改成功！`,
						icon: 'success',
						duration: 2000
					});
					showPopup.value = false
				})
			}
		})
	}

	onLoad(async (options) => {})
	onReady(() => {
		// paging.value.reload()
		nextTick(() => {
			formDataRef.value?.setRules(rules.value);
		})
	})
</script>
<style lang='scss' scoped>
	.view-group {
		background-color: #fff;
	}

	.operate-box {
		position: fixed;
		z-index: 99;
		bottom: 50rpx;
	}

	.setting-form :deep(.u-input) {
		background-color: rgba(243, 244, 246, 1);
		padding: 12rpx !important;
		border-radius: 16rpx;
	}

	.setting-form :deep(.u-form-item) {
		padding: 10rpx 0;
	}

	.setting-pages {
		height: 100vh;
		background-color: rgba(246, 247, 248, 1);
	}

	.tar {
		:deep(.u-input) {
			text-align: right !important;
		}
	}
</style>